<template>
  <div>
    <div
      style="line-height: 40px; font-size: 22px; font-weight: 600; padding: 5px"
    >
      事件综合查询
    </div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="2">
          <el-input
            v-model="value"
            placeholder="选择事件类型"
            size="mini"
            class="top-ipt"
          ></el-input>
        </el-col>
        <el-col :span="2">
          <el-select
            v-model="value"
            placeholder="发生科室"
            size="mini"
            class="top-ipt"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select
            v-model="value"
            placeholder="上报科室"
            size="mini"
            class="top-ipt"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select
            v-model="value"
            placeholder="事件等级"
            size="mini"
            class="top-ipt"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-date-picker
            v-model="value"
            align="right"
            type="date"
            placeholder="发生日期起"
            size="mini"
            style="width: 140px; margin-left: 5px"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-date-picker
            v-model="value"
            align="right"
            type="date"
            placeholder="发生日期至"
            size="mini"
            style="width: 140px; margin-left: 5px"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-date-picker
            v-model="value"
            align="right"
            type="date"
            placeholder="上报日期起"
            size="mini"
            style="width: 140px; margin-left: 5px"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-date-picker
            v-model="value"
            align="right"
            type="date"
            placeholder="上报日期至"
            size="mini"
            style="width: 140px; margin-left: 5px"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-select
            v-model="value"
            placeholder="患者姓名"
            size="mini"
            class="top-ipt"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select
            v-model="value"
            placeholder="事件编号"
            size="mini"
            class="top-ipt"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select
            v-model="value"
            placeholder="事件状态"
            size="mini"
            class="top-ipt"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2" v-if="false">
          <el-select
            v-model="value"
            placeholder="评价状态"
            size="mini"
            class="top-ipt"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="2">
          <el-select
            v-model="value"
            placeholder="作废状态"
            size="mini"
            class="top-ipt"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select
            v-model="value"
            placeholder="假日状态"
            size="mini"
            class="top-ipt"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            style="float: right"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <el-row>
      <el-col :span="18">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          style="margin: 1px 8px"
          >导出</el-button
        >
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-s-grid"
          style="margin: 10px 10px; float: right; margin-right: 20px"
          v-if="btnShow"
          @click="btnClick"
        >
        </el-button>
        <el-select
          v-model="value1"
          size="mini"
          multiple
          collapse-tags
          @change="selectChange"
          v-if="disShow"
          style="float: right; margin-right: 20px"
        >
          <el-option
            v-for="item in tableDataLabel"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-table :data="tableData" style="width: 100%; margin: 10px">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            v-for="(item, id) in tableList"
            :key="id"
          />
        </el-table>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card" style="margin-left: 20px; height: 100vh">
          <div slot="header" class="clearfix">
            <span>事件状态</span>
          </div>
          <div class="text item">
            <div class="block">
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :icon="activity.icon"
                  :type="activity.type"
                  :color="activity.color"
                  :size="activity.size"
                  :timestamp="activity.timestamp"
                >
                  {{ activity.content }}
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      value1: [],
      disShow: false,
      btnShow: true,
      tableDataLabel: [
        {
          value: "1",
          label: "事件编号",
          prop: "name",
        },
        {
          value: "2",
          label: "事件类型",
          prop: "name",
        },
        {
          value: "3",
          label: "事件等级",
          prop: "name",
        },
        {
          value: "4",
          label: "患者姓名",
          prop: "name",
        },
        {
          value: "5",
          label: "发生科室",
          prop: "name",
        },
        {
          value: "6",
          label: "上报科室",
          prop: "name",
        },
        {
          value: "7",
          label: "发生时间",
          prop: "name",
        },
        {
          value: "8",
          label: "上报时间",
          prop: "name",
        },
        {
          value: "9",
          label: "状态",
          prop: "name",
        },
        {
          value: "10",
          label: "超时时限",
          prop: "name",
        },
      ],
      tableList: [
        {
          value: "1",
          label: "事件编号",
          prop: "name",
        },
        {
          value: "2",
          label: "事件类型",
          prop: "name",
        },
        {
          value: "3",
          label: "事件等级",
          prop: "name",
        },
        {
          value: "4",
          label: "患者姓名",
          prop: "name",
        },
        {
          value: "5",
          label: "发生科室",
          prop: "name",
        },
        {
          value: "6",
          label: "上报科室",
          prop: "name",
        },
        {
          value: "7",
          label: "发生时间",
          prop: "name",
        },
        {
          value: "8",
          label: "上报时间",
          prop: "name",
        },
        {
          value: "9",
          label: "状态",
          prop: "name",
        },
        {
          value: "10",
          label: "超时时限",
          prop: "name",
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
  methods: {
    selectChange(val) {
      this.tableList = [];
      this.departmentIds = []; //初始化数据
      this.departmentNames = []; //初始化数据
      for (let i = 0; i <= val.length - 1; i++) {
        this.tableDataLabel.find((item) => {
          //这里的tableDataLabel就是数据源
          if (item.value == val[i]) {
            this.tableList.push({
              value: item.value,
              label: item.label,
              prop: item.prop,
            });
          }
        });
      }
      console.log(this.tableList);
    },
    btnClick() {
      this.disShow = !this.disShow;
      this.btnShow = !this.btnShow;
    },
  },
};
</script>
<style scoped>
body {
  background-color: #f8f9fa;
}
.box-card {
  margin: 5px;
}
.el-card /deep/ .el-card__header {
  padding: 10px 20px;
  background-color: #e2e2e2;
}
.top-ipt {
  margin-left: 5px;
}
</style>